<html>
<head>
<title>Treeview Example 3 - Sitemap</title>
<script type="text/javascript" src="lib/processing.js"></script>
<script type="text/javascript" src="lib/treeview.js"></script>
<script type="text/javascript">
	function loadTree(){
		setActiveColor("#D1A925");
		setCanvasColor("#FFFAE4");
		setNodeColor("#40637D");
		setNodeFontType("Calibri");
		setFontColor("#FFFFFF");
		setSelectedColor("#26393D");
		setHoverColor("#D1A925");
		setLineColor("#26393D");
		setBorderColor("#26393D");
		setHasBorder(false);
		setIsExpanded(true);
		//zoomToFit();
		displayTree('amazon.xml', 900, 500);		
	}
</script>

<style type="text/css">
body {
	font-family: Calibri;
}
canvas {
	text-align: center;
	border: 1px solid darkred;
}
#editor {
	margin-top: 10px;
}
#show_url, #show_label{
	display: none;
}
#actions {
	position: absolute;
	top:100px;
	right:5px;
}
</style>
</head>


<body onload="loadTree()">
	<h2>Amazon Sitemap</h2>
	<canvas id="canvas"></canvas>
	<div id="editor">
		<form name="edit_form" action="" method="POST">
			<span id="show_label">None</span>	
			<label for="edit_label">Label</label>
			<input id="edit_label" name="edit_label" type="text" size="50" value="Label" disabled="disabled"/>
			<a id="show_url" target="_blank">None</a>
			<label for="edit_url">URL&nbsp;&nbsp;</label>
			<input id="edit_url" name="edit_url" type="text" size="50" value="URL" disabled="disabled"/>
			<input type="button" value="Update node" onClick="updateNode(this.form)"/>	
		</form>			 
	</div>
	<div id="actions">
		<input type="button" value="Expand all" onClick="expandAll()"/><br/>
		<input type="button" value="Collapse all" onClick="collapseAll()"/>
	</div>
</body>
</html>